<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 'Notify bar'</title>
<link rel="stylesheet" href="jquery.notifyBar.css" type="text/css" media="screen"  />
<style type="text/css">
.custom {
  font-size:20px;
  font-family: "Times New Roman", Times, serif;
  text-transform:uppercase;
  background:#fff url(http://www.dmitri.me/misc/jq-test-pattern.gif) repeat-x top center;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
img {
behavior:url("/inc/iepngfix.htc");
}
</style>
<link href="css/ie6.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
</head>

<body>

<h1>'Notify Bar' plugin</h1>
    <p>
      Simple plugin (basically it's not a plugin, but widget) to show notify bar
      (like on Twitter's webpage).
      It's very simple to use:
    </p>
    <pre>
      <code>
$(function () {
  $.notifyBar({
    html: "Thank you, your settings were updated!",
    delay: 2000,
    animationSpeed: "normal"
  });  
});
      </code>
    </pre>
    and to your html page stylesheet:
    <pre>
<code>&lt;link rel="stylesheet" href="jquery.notifyBar.css" type="text/css" media="screen"  /&gt;</code>
    </pre>
    <h3>$.notifyBar can pass next parameters:</h3>
    <table border="1">
      <tr>
        <th>Parameter</th>
        <th>Description</th>
        <th>Type</th>
        <th>Default</th>
      </tr>
      <tr>
        <td>html</td>
        <td>What text will be inside bar, can be HTML</td>
        <td>String [optional]</td>
        <td>"Your message here"</td>
      </tr>
      <tr>
        <td>delay</td>
        <td>How long bar will be delayed, doesn't count animation time.</td>
        <td>Integer [optional]</td>
        <td>2000</td>
      </tr>
      <tr>
        <td>animationSpeed</td>
        <td>How long this bar will be slided up and down</td>
        <td>String | Integer [optional]</td>
        <td>"normal"</td>
      </tr>
      <tr>
        <td>jqObject</td>
        <td>Own jquery object for notify bar</td>
        <td>jQuery object [optional]</td>
        <td>null</td>
      </tr>
      <tr>
        <td>cls</td>
        <td>You can set own CSS class for 'Notify bar'. There is too premade clasess "error" and "success"</td>
        <td>String</td>
        <td></td>
      </tr>
      <tr>
        <td>close</td>
        <td>If set to true close button will be displayed</td>
        <td>Boolean</td>
        <td>false</td>
      </tr>
    </table>
    
    <h3>Check different styles</h3>
    <p>
      Usually this bar appears on the success message, but anyway can be used everywhere.
      <br />
      Try it! <strong>↓</strong>
    </p>
    <button id="common">Default style bar</button>
    <button id="error">Error style bar</button>
    <button id="success">Success style bar</button>
    <button id="custom">Custom styling</button>
    <button id="close">With close button</button>
    
    
    <p>
      <a href="http://www.dmitri.me/blog/notify-bar">Project home</a> | 
      <a href="http://github.com/dknight/jQuery-Notify-bar">download source</a>
    </p>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" src="jquery.notifyBar.js"></script>
    <script type="text/javascript">
    $(function() {
      
      $.notifyBar({ html: "This is 'Notify bar'!" });
      
      $("#callGreen").click(function(){
        $.notifyBar({
          html: "Thank you, your settings were updated!",
          jqObject: $("#greenDiv")
        });
      });
      
      $("#callError").click(function(){
        $.notifyBar({
          jqObject: $("#errorDiv")
        });
      });
      
      
      $("#common").click(function(){
        $.notifyBar({});
      });
      $("#error").click(function(){
        $.notifyBar({ cls: "error", html: "Error occurred!" });
      });
      $("#success").click(function(){
        $.notifyBar({ cls: "success", html: "Your data has been changed!" });
      });
      $("#custom").click(function(){
        $.notifyBar({ cls: "custom", html: "Your data has been changed!" });
      });
      $("#close").click(function(){
        $.notifyBar({ html: "Click 'close' to hide notify bar", close: true, delay: 1000000 });
      });
      
      
    });
    
    </script>
</body>
</html>
